<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三个问题</title>
    <style>
        .analog {
            width: 200px;
            height: 50px;
            background-color: red;
            color: #fff;
            border-radius: 10px;
            font-size: 16px;
            border: none;
            background-image: url(./太维.png);
            background-size: 50% 100%;
            position: absolute;
        }

        /* 添加额外的样式以区分按钮 */
        #buttonContainer .analog:nth-child(1) {
            top: 100px;
            left: 200px;
        }

        #buttonContainer .analog:nth-child(2) {
            top: 100px;
            left: 400px;
        }
    </style>
</head>

<body>

    <!-- 按钮容器 -->
    <div id="buttonContainer"></div>
</body>

</html>

<script>
    // 创建按钮的函数
    function createButton(text, key, position) {
        var button = document.createElement('button');
        button.className = 'analog';
        button.innerText = text;
        button.setAttribute('data-key', key);

        // 设置按钮的位置
        button.style.position = position;

        // 添加点击事件处理逻辑
        button.addEventListener('click', function (event) {
            var button = event.target;
            var key = button.getAttribute('data-key');
            console.log(key);
        });

        return button;
    }

    // 在页面加载完毕时创建按钮
    document.addEventListener('DOMContentLoaded', function () {
        var page1Button = createButton('太维测试1', 'page1', 'absolute');
        var page2Button = createButton('太维测试2', 'page2', 'absolute');

        // 将创建的按钮添加到页面中的按钮容器中
        document.getElementById('buttonContainer').appendChild(page1Button);
        document.getElementById('buttonContainer').appendChild(page2Button);
    });

</script>